<template>
  <a-tabs defaultActiveKey="1">
    <a-tab-pane tab="背景" key="1">
      <a-row>
        <a-col :span="6">类型</a-col>
        <a-col :span="16">
          <a-select style="width: 100%" v-model:value="meshAttr.type">
            <a-select-option value="mesh">网格</a-select-option>
            <a-select-option value="dot">空白</a-select-option>
          </a-select>
        </a-col>
      </a-row>
      <div v-if="meshAttr.type == 'mesh'">
        <a-row>
          <a-col :span="6">大小</a-col>
          <a-col :span="14">
            <a-slider :min="1" :max="20" :step="1" v-model:value="graphSize" />
          </a-col>
          <a-col :span="2">
            <div class="result">{{ graphSize }}px</div>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6">颜色</a-col>
          <a-col :span="16">
            <a-input
              type="color"
              v-model:value="meshAttr.color"
              style="width: 100%"
            />
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6">线条宽度</a-col>
          <a-col :span="14">
            <a-slider
              :min="0.5"
              :max="10"
              :step="0.5"
              v-model:value="meshAttr.thickness"
            />
          </a-col>
          <a-col :span="2">
            <div class="result">{{ meshAttr.thickness.toFixed(1) }}px</div>
          </a-col>
        </a-row>
      </div>
    </a-tab-pane>
  </a-tabs>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, watch } from 'vue'
import { FlowGraph } from '@/common/FlowGraph'
interface IFMeshAttr {
  type: string
  color: string
  thickness: number
}
export default defineComponent({
  name: 'ConfigGrid',
  setup() {
    const meshAttr = reactive<IFMeshAttr>({
      type: 'mesh',
      color: '#e5e5e5',
      thickness: 1
    })
    const graphSize = ref(10)

    watch(meshAttr, () => {
      FlowGraph.graph.drawGrid({
        type: meshAttr.type,
        args: [
          {
            color: meshAttr.color,
            thickness: meshAttr.thickness
          }
        ]
      })
    })
    watch(graphSize, () => {
      FlowGraph.graph.setGridSize(graphSize.value)
    })
    return {
      meshAttr,
      graphSize
    }
  }
})
</script>

<style lang="less" scoped></style>
